<template>
	<div>
		<div class="no-print" style="height: 42px;"></div>
		<div style="width: 100%;display: flex;">
			<div class="no-print" style="width: 30%;">.</div>
			<div class="width-100-percent print-content">
				<tableList
					:report-data="reportData"
				></tableList>
			</div>
			<div class="no-print" style="width: 30%;margin-top: 22px;">
				<div style="display: flex;flex-direction: column;">
					<div>
						<el-button class="no-print" type="default" icon="el-icon-printer" size="small" style="margin-left: 4px;" @click="onPrintBtn"></el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
    import XEUtils from 'xe-utils';
    import tableList from './components/printer-table-list';
    import { productionSpunYarnOutputGetByDate } from '../../../api/production/reports';
    export default {
        mixins: [],
        components: {
            tableList
        },
        data() {
            return {
                tableData: [],
                dataId: null,
                reportData: {}
            };
        },
        methods: {
            footerMethod({ columns, data }) {
                return [
                    columns.map((column, columnIndex) => {
                        if (columnIndex === 0) {
                            return '合计:';
                        }
                        if (['totalSalary'].includes(column.property)) {
                            if (column.property === 'totalSalary') {
                                return XEUtils.sum(data, column.property);
                            }
                            return XEUtils.sum(data, column.property);
                        }
                        return null;
                    })
                ];
            },
            onPrintBtn() {
                window.print();
            },
            getListRequest() {
                this.tableLoading = true;
                const params = this.$route.query;
                console.log(params);
                return productionSpunYarnOutputGetByDate(params).then(res => {
                    this.tableLoading = false;
                    if (res.data.status === 200) {
                        const resData = res.data.res || {};
                        resData.postList.forEach(x => {
                            x.empNum = x.empList ? x.empList.length : 0;
                        });
                        this.reportData = resData;
                    }
                });
            }
        },
        mounted() {
            this.getListRequest();
        }
    };
</script>

<style scoped lang="scss">

.print-content {
    ::v-deep .vxe-table--render-default {
        position: relative;
        border: solid 2px black!important;
        font-size: 12px;
        color: #606266;
        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
        direction: ltr;
    }
}
.table {
    width: 100%;
    padding: 0;
    margin: 0;
    border-collapse: collapse;
    box-sizing: border-box;
    font-weight: 500;
    tr {
        //height: 139px;
        border: solid 2px #17233d;
    }
    td {
        min-width: 100px;
        box-sizing: border-box;
        padding: 10px;
        border: solid 2px #17233d;
        text-align: center;
    }
    .form-title {
        font-weight: 500;
        font-size: 36px;
    }
    .label-name {
        font-weight: 500;
        font-size: 28px;
    }
}
@media print {
    .no-print{
        display: none;
    }
}
@page {
    /*横向打印landscape,纵向打印portrait*/
    size: portrait;
    /*去除页眉页脚-size和margin同时使用*/
    margin: 2mm; /* this affects the margin in the printer settings */
}
</style>
